<template>
  <div class="project-list">
    <meta name="referrer" content="no-referrer" />
    <div class="project-detail">
      <img
        class="project-img"
        src="https://i0.hdslb.com/bfs/archive/450f21ed1df1c112a8cabf4ebd1b6f0d70a69a66.jpg@640w_400h_1c_!web-space-index-myvideo.webp"
      />
      <div class="accompany-desc">
        <span class="accompant-title">title</span>
        <div class="accompany-data">
          <div>
            <img
              src="../assets/download.png"
              style="width: 15px; height: 15px; margin-right: 3px"
            />
            <span class="accompany-date">9999</span>
          </div>
          <div>
            <img
              src="../assets/time-fill.png"
              style="width: 15px; height: 15px; margin-left: 8px"
            />
            <span class="accompany-date">2022-01-20</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProjectFromCenter.vue",
};
</script>

<style scoped>
.project-list {
  margin-top: 20px;
  margin-left: 60px;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: center; */
}
.project-detail {
  width: 180px;
}
.project-img {
  border-radius: 4px;
  display: block;
  width: 160px;
  height: 100px;
}
.accompany-desc {
  width: 160px;
  display: grid;
  grid-template-rows: 1fr 1fr;
}
.accompant-title {
  font-size: 14px;
  font-weight: 300;
  font-family: pingfang;
}
.accompany-date {
  font-size: 12px;
  font-family: Pingfang;
  color: #999999;
  font-weight: 200;

}
.accompany-data {
    width: 160px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>